<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>terminal test</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <style>
	
	* {
		box-sizing: border-box;
	}

	body {
		background: black;
		color: white;
		font-family: arial;
	}
	
	a {
		color: white;
	}

	body > #clone-div {
		display: none;
	}
	
	#terminal {
		width: 800px;
		height: 400px;
		border: 5px solid rgba(255,255,255,0.2);
		margin: 50px auto;
		padding: 20px 30px;
		overflow: hidden;
		font-family: monospace;
	}

	#terminal .cloned {
		margin: 0 0 10px;
	}
	
	#terminal p {
		margin: 0;
	}

	#add-stuff {
		display: block;
		text-align: center;
	}
	
	#terminal > .cloned {
		font-size: 15px;
		line-height: 1.5;
		color: white;
	}

  </style>
  
</head>

<body>

	<div id="terminal">
		
		<!-- code goes in here -->

	</div>

	<a href="#" id="add-stuff">add stuff to terminal</a>
	
	<div id="other-info">
		<h1>page title in here</h1>
		
	</div>

	<div id="clone-div">
		<p>Learning to pronounce words in a foreign language can be difficult Sometimes embarrassingspeakeasy is an experiment to see if.</p>
	</div>


	<script src="jquery-2.0.3.min.js"></script>
	<script>

		$(document).ready( function() {

			$(document).on('click' , '#add-stuff' , function(e){
				e.preventDefault();
				var $clone = $('#clone-div').clone().attr('id','').addClass('cloned').prepend(randomFrom(greetings));
					$terminal = $('#terminal');
				
				$terminal.append($clone);
				var cloneHeight = $clone.outerHeight(true),
					currentScroll = $terminal.scrollTop();
				console.log($clone, cloneHeight, currentScroll);
				$terminal.scrollTop(currentScroll += cloneHeight);
			});

		});

		function randomFrom(arr){
		    var randomIndex = Math.floor(Math.random() * arr.length);
		    return arr[randomIndex];
		}
		var greetings = [
			"Mirëdita!",
			"Ahalan!",
			"Parev!",
			"Nei Ho!",
			"Goddag!",
			"Hallo!",
			"Hello!",
			"Saluton!",
			"Hei!",
			"Guten Tag!",
			"Gia'sou!",
			"Aloha!",
			"Shalom!",
			"Namaste!",
			"Jó napot!",
			"Halló!",
			"Halo!",
			"Aksunai!",
			"Dia dhuit!",
			"Salve!",
			"Ciao!",
			"Kon-nichiwa!",
			"Hola!",
			"Jambo!",
			"Xin chào!",
			"Здра́вствуйте!",
			"Shalom!",
			"salut!",
			"bonjour!",
			"bonsoir!",
			"hej!",
			"Privet!",
			"hi!",
			"Приве́т!",
			"olá!"
		];


	</script>
</body>
</html>